<template>
    <div id="query-selector-item-container">
        <div 
            class="sign-in-query-dept" 
            :style="getStyle(dept, -1)" 
            @click="selDept(-1)">
            全部
        </div>
        <div 
            class="sign-in-query-dept" 
            v-for="(item, index) in $store.state.info.depts" 
            :key="index" 
            :style="getStyle(dept, index)" 
            @click="selDept(index)"
        >{{item.deptName}}</div>
        <br>
        <div 
            class="sign-in-query-dept" 
            v-for="(item, index) in groupList" 
            :key="item + index" 
            :style="getStyle(group, index)" 
            @click="selGroup(index)">
            {{ item.groupName }}
        </div>
    </div>
</template>

<script>

import local_vuex from "@sign/js/vuex";

export default {
    data() {
        return {
            // 被选中元素的样式
            actStyle: {
                background: "rgb(0, 119, 255)",
                color: "white"
            },
            // 被选中的部门下标
            dept: -1,
            // 被选中小组的下标
            group: -1,
            // 被选中部门的小组列表
            groupList: []
        }
    },
    watch: {
        /**
         * 当选中的部门发生改变时
         */
        dept(v) {
            // 置初值
            this.group = -1;
            local_vuex.state.group = -1;
            // 根据部门填充新的小组列表
                this.groupList = v >= 0 
                    ? this.$store.state.info.depts[v].groupList
                    : [];
        }
    },
    methods: {
        /**
         * 获取样式
         */
        getStyle(v, index) {
            if (index === v) return this.actStyle;
        },
        /**
         * 选择部门
         */
        selDept(index) {
            this.dept = index;
            local_vuex.state.dept = index;
        },
        /**
         * 选择小组
         */
        selGroup(index) {
            this.group = index;
            local_vuex.state.group = index;
        },
    }
}
</script>

<style lang="scss">
@import "@sign/scss/query-selector.scss";
</style>